<template>
  <section>
    <div class="container">
      <div class="container-title">查询条件</div>
      <div class="container-body pd">
        <el-form
          label-position="right"
          label-width="120px"
          :model="searchForm"
          ref="searchForm"
          class="demo-form-inline"
        >
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item label="手机号：" size="small" prop="phone">
                <el-input
                  v-model="searchForm.phone"
                  placeholder="请输入手机号"
                  prefix-icon="el-icon-search"
                  size="small"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否冻结：" size="small" prop="isFrozen">
                <el-select
                  v-model="searchForm.isFrozen"
                  clearable
                  placeholder="请选择"
                  size="small"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="起始时间：" size="small" prop="starttime">
                <el-date-picker
                  v-model="searchForm.starttime"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="结束时间：" size="small" prop="endtime">
                <el-date-picker
                  v-model="searchForm.endtime"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex"  justify="center">
            <el-button
              class="is-tableBtn"
              size="small"
              @click="clearForm('searchForm')"
              >清空</el-button>
            <el-button
                class="is-tableBtn"
                type="primary"
                size="small"
                @click="GetTbUserList(searchForm)"
                >查询</el-button>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="container">
      <div class="container-title">会员列表</div>
      <div class="container-body pd">
        <el-table
          :data="tableData"
          v-loading="loading"
          border
          style="width: 100%"
          size="small"
        >
          <el-table-column prop="number" label="用户编号" align="center">
          </el-table-column>
          <el-table-column prop="phone" label="手机号" align="center">
          </el-table-column>
          <el-table-column prop="nickName" label="用户昵称" align="center">
          </el-table-column>
          <el-table-column prop="integral" label="积分" align="center">
          </el-table-column>
          <el-table-column prop="isFrozen" label="是否冻结" align="center">
            <template slot-scope="scope">
              {{ scope.row.isUpper ? "是" : "否" }}
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="会员注册时间"
            align="center"
          >
          </el-table-column>
        </el-table>
        <div class="pageBox">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="currentPage"
          >
          </el-pagination>
          <div class="clear"></div>
        </div>
      </div>
    </div>
  </section>
</template>
<script>
export default {
  data() {
    return {
      page: 1,
      total: 0,
      options: [
        {
          value: false,
          label: "否",
        },
        {
          value: true,
          label: "是",
        },
      ],
      tableData: [],
      loading: true,
      searchForm: { name: "" },
    };
  },
  created() {
    this.GetTbUserList(this.searchForm);
  },
  methods: {
    clearForm(formName) { // 清空筛选
      this.$refs[formName].resetFields();
    },
    currentPage(page) {
      this.page = page;
      this.GetTbUserList(this.searchForm);
    },

    async GetTbUserList(searchForm) {
      this.loading = true;
      let skip = (this.page - 1) * 10;
      // 请求案例
      let res = await this.$store.dispatch("GetTbUserList", {
        phone: searchForm.phone,
        isFrozen: searchForm.isFrozen,
        starttime: searchForm.starttime,
        endtime: searchForm.endtime,
        skip,
      });
      if (res.success) {
        this.tableData = res.data.itmes || [];
        this.total = res.data.totalCount;
      } else {
              this.$message.error(res.errorMessage || '网络异常');
            }
      this.loading = false;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/varibles.scss";
.btn {
  margin-bottom: $btnHeight;
  color: #ffff;
}
.btnwarning {
  color: $btnwarning;
}
.pageBox {
  padding-top: 10px;
  clear: both;
  .el-pagination {
    float: right;
  }

  .clear {
    clear: both;
  }
}
</style>
